<template>
  <div style="margin-top: 20px; display: flex; flex-wrap: wrap; gap: 15px;" class="filter-container">
    <el-button type="primary" @click="fetchJobData">根据简历信息搜索岗位</el-button>
    <el-button type="primary" @click="showAddRecommendationDialog">新增职业方向</el-button>
    <el-button type="primary" @click="showAddJobDialog">新增岗位</el-button>
         <!-- 修改帮助按钮的点击事件 -->
<el-button class="help-button" @click="startGuide" >
  <el-icon>
    <QuestionFilled />
  </el-icon>
  帮助
</el-button>
  </div>

  <!-- 推荐岗位展示区域 -->
  <div class="section" >
    <h2 class="section-title">为您推荐的职业方向</h2>
    <el-table
      :data="getRecommendedDataForCurrentPage"
      style="width: 100%; margin-top: 10px; border-radius: 8px; overflow: hidden;"
    >
      <el-table-column label="序号" min-width="55" type="index" prop="id" align="center"></el-table-column>

      <el-table-column prop="technicalField" label="技术领域" min-width="150" align="center">
        <template v-slot="scope">
          <span>{{ scope.row.technicalField }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="jobPosition" label="推荐岗位" min-width="150" align="center">
        <template v-slot="scope">
          <span>{{ scope.row.jobPosition }}</span>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" min-width="200" align="center">
        <template v-slot="scope">
          <el-button type="primary" @click="handleChange(scope.row)">换一换</el-button>
          <el-button type="primary" @click="showRecommendedDetail(scope.row)">查看就业岗位建议</el-button>
          <el-button type="danger" @click="deleteRecommended(scope.row)">删除岗位建议</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="display: flex; justify-content: flex-end;">
      <el-pagination
        layout="sizes, prev, pager, next"
        :total="recommendedData.length"
        v-model:page-size="recommendedDataPageSize"
        v-model:current-page="recommendedDataPage"
        :page-sizes="pageSizeOptions"
      />
    </div>
  </div>

  <div class="section"  id="step1">
    <h2 class="section-title">推荐的岗位</h2>
    <el-table :data="getJobListForCurrentPage" style="width: 100%; margin: 20px 0 20px 0;">
      <el-table-column label="序号" min-width="55" type="index" prop="id" align="center"></el-table-column>
      <el-table-column label="技术领域" min-width="120" prop="jobField" align="center" show-overflow-tooltip="true">
        <template v-slot="scope">
          <span class="field-container">
            <span v-for="(char, index) in scope.row.jobField.split('')" :key="index" class="pop-char">
              {{ animatedChars[`${scope.$index}-0-${index}`] }}
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" min-width="90" prop="jobType" align="center" show-overflow-tooltip="true">
        <template v-slot="scope">
          <span class="field-container">
            <span v-for="(char, index) in (scope.row.jobType || '').split('')" :key="index" class="pop-char">
              {{ animatedChars[`${scope.$index}-1-${index}`] }}
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="最低学历要求" min-width="110" prop="education" align="center">
        <template v-slot="scope">
          <span class="field-container">
            <span v-for="(char, index) in (scope.row.education || '').split('')" :key="index" class="pop-char">
              {{ animatedChars[`${scope.$index}-2-${index}`] }}
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="工作地点" min-width="80" prop="location" align="center">
        <template v-slot="scope">
          <span class="field-container">
            <span v-for="(char, index) in (scope.row.location || '').split('')" :key="index" class="pop-char">
              {{ animatedChars[`${scope.$index}-3-${index}`] }}
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="计划招聘人数" min-width="110" prop="recruitCount" align="center">
        <template v-slot="scope">
          <span class="field-container">
            <span v-for="(char, index) in (scope.row.recruitCount || '').toString().split('')" :key="index" class="pop-char">
              {{ animatedChars[`${scope.$index}-4-${index}`] }}
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="公司类型" min-width="90" prop="companySize" align="center">
        <template v-slot="scope">
          <span class="field-container">
            <span v-for="(char, index) in (scope.row.companySize || '').split('')" :key="index" class="pop-char">
              {{ animatedChars[`${scope.$index}-5-${index}`] }}
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="470" align="center">
        <template v-slot="scope">
          <el-button type="primary" @click="changeRecommendJob(scope.row)">换一换</el-button>
          <el-button type="primary" @click="showJobDetail(scope.row)">查看详情</el-button>
          <el-button type="success" id="step2"  @click="startInterview(scope.row)">开始模拟面试</el-button>
          <el-button type="danger" @click="removeJob(scope.row,'notInterviewedJobs')">删除推荐的岗位</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display: flex; justify-content: flex-end;">
      <el-pagination
        layout="sizes, prev, pager, next"
        :total="notInterviewedJobs.length"
        v-model:page-size="jobListPageSize"
        v-model:current-page="jobListPage"
        :page-sizes="pageSizeOptions"
      />
    </div>
  </div>

  <div class="section">
    <h2 class="section-title">已进行模拟面试的岗位</h2>
    <el-table :data="getInterviewedJobsForCurrentPage" style="width: 100%; margin: 20px 0 20px 0;">
      <el-table-column label="序号" min-width="55" type="index" prop="id" align="center"></el-table-column>
      <el-table-column label="技术领域" min-width="100" prop="jobField" align="center" show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="岗位名称" min-width="80" prop="jobType" align="center" show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="最低学历要求" min-width="110" prop="education" align="center"></el-table-column>
      <el-table-column label="工作地点" min-width="80" prop="location" align="center"></el-table-column>
      <el-table-column label="计划招聘人数" min-width="110" prop="recruitCount" align="center"></el-table-column>
      <el-table-column label="公司类型" min-width="90" prop="companySize" align="center"></el-table-column>
      <el-table-column label="薪资范围" min-width="100" prop="salary" align="center"></el-table-column>
      <el-table-column label="操作" min-width="340" align="center">
        <template v-slot="scope">
          <el-button type="primary" @click="showSelectedJobDetail(scope.row)">查看详情</el-button>
          <el-button type="success" @click="startInterview(scope.row)">开始模拟面试</el-button>
          <el-button type="danger" @click="removeJob(scope.row,'interviewedJobs')">删除岗位</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display: flex; justify-content: flex-end;">
      <el-pagination
        layout="sizes, prev, pager, next"
        :total="selectedJobsLength"
        v-model:page-size="interviewedJobsPageSize"
        v-model:current-page="interviewedJobsPage"
        :page-sizes="pageSizeOptions"
      />
    </div>
  </div>

  <!-- 弹窗：新增岗位建议 -->
<el-dialog 
  v-model="addRecommendationDialogVisible" 
  title="新增岗位建议"
  width="650px"

  class="recommendation-dialog"

>
  <template #header>
    <div class="dialog-header">
      <span class="dialog-title">新增岗位建议</span>
    </div>
  </template>

  <el-form 
    :model="newRecommendation" 
    label-width="120px" 
    :rules="rules" 
    ref="formRef"
    label-position="top"
  >
    <div class="form-content">
      <el-form-item 
        label="技术领域" 
        prop="technicalField" 
        required
        class="form-item"
        align="left"
      >
        <el-input 
          v-model="newRecommendation.technicalField" 
          placeholder="请输入技术领域，如：前端开发、人工智能等"
          clearable
          class="custom-input"
        >
          <template #prefix>
            <el-icon><Grid /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      
      <el-form-item 
        label="推荐岗位" 
        prop="jobPosition" 
        required
        class="form-item"
        align="left"
      >
        <el-input 
          v-model="newRecommendation.jobPosition" 
          placeholder="请输入推荐岗位名称，如：前端工程师、算法工程师等"
          clearable
          class="custom-input"
        >
          <template #prefix>
            <el-icon><Briefcase /></el-icon>
          </template>
        </el-input>
      </el-form-item>
    </div>
  </el-form>
  
  <template #footer>
    <div class="dialog-footer">
      <el-button 
        @click="addRecommendationDialogVisible = false" 
        size="large"
        class="cancel-btn"
      >
        <el-icon><Close /></el-icon>
        取消
      </el-button>
      <el-button 
        type="primary" 
        @click="submitNewRecommendation" 
        size="large"
        class="confirm-btn"
      >
        <el-icon><Check /></el-icon>
        确认提交
      </el-button>
    </div>
  </template>
</el-dialog>

<!-- 弹窗：职业方向详细展示 -->
<el-dialog 
  v-model="showCareerDetail" 
  title="职业方向详情"
  width="650px"
  class="custom-dialog career-detail-dialog"
>
  <template #header>
    <div class="dialog-header">
      <span class="dialog-title">职业方向详情</span>
    </div>
  </template>

  <div v-if="selectedCareerDetail" class="career-detail-content">
    <div class="detail-section">
      <h3 class="section-title">技术领域</h3>
      <p class="section-content">{{ selectedCareerDetail.technicalField }}</p>
    </div>

    <div class="detail-section">
      <h3 class="section-title">推荐岗位</h3>
      <p class="section-content">{{ selectedCareerDetail.jobPosition }}</p>
    </div>

    <div class="detail-section">
      <h3 class="section-title">建议</h3>
      <p class="section-content"  style="white-space: pre-line;">{{ selectedCareerDetail.suggestion }}</p>
    </div>

    <div class="action-buttons">
      <el-button type="primary" @click="handleChange(selectedCareerDetail)" class="change-btn">换一换</el-button>

    </div>
  </div>

  <template #footer>
    <div class="dialog-footer">
      <el-button @click="showCareerDetail = false" class="cancel-btn">关闭</el-button>
      <el-button 
        type="danger" 
        @click="selectedCareerDetail ? deleteRecommended(selectedCareerDetail) : null"
        class="danger-btn"
      >
        删除岗位建议
      </el-button>
    </div>
  </template>
</el-dialog>
<!-- 弹窗：新增岗位 -->
<el-dialog 
  v-model="addJobDialogVisible" 
  title="新增岗位"
  width="700px"
  class="custom-dialog"

>
  <template #header>
    <div class="dialog-header">
      <span class="dialog-title">新增岗位</span>
    </div>
  </template>

  <el-form :model="newJob" label-position="top" class="dialog-form">
    <el-row :gutter="20" >
      <el-col :span="12" >
        <el-form-item label="技术领域" class="form-item" align="left">
          <el-input 
            v-model="newJob.jobField" 
            placeholder="请输入技术领域"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="岗位名称" class="form-item" align="left">
          <el-input 
            v-model="newJob.jobType" 
            placeholder="请输入岗位名称"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="最低学历要求" class="form-item" align="left">
          <el-input 
            v-model="newJob.education" 
            placeholder="请输入最低学历要求"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="计划招聘人数" class="form-item" align="left">
          <el-input 
            v-model="newJob.recruitCount" 
            placeholder="请输入计划招聘人数"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="工作地点" class="form-item" align="left">
          <el-input 
            v-model="newJob.location" 
            placeholder="请输入工作地点"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所需最低工作经验(年)" class="form-item" align="left">
          <el-input 
            v-model.number="newJob.minExperience" 
            placeholder="请输入所需工作经验"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="公司类型" class="form-item" align="left">
      <el-select v-model="newJob.companySize" placeholder="请输入公司类型" align="left">
          <el-option label="大型企业" />
          <el-option label="中型企业"  />
          <el-option label="小微企业" />
        </el-select>
    </el-form-item>

    <el-form-item label="薪资范围(千/月)" class="form-item" align="left">
      <div class="salary-range">
        <el-input 
          v-model.number="newJob.salaryMin" 
          placeholder="最低薪资"
          class="custom-input"
        ></el-input>
        <span class="range-separator">至</span>
        <el-input 
          v-model.number="newJob.salaryMax" 
          placeholder="最高薪资"
          class="custom-input"
        ></el-input>
      </div>
    </el-form-item>

    <el-form-item label="职位描述" class="form-item" align="left">
      <el-input 
        v-model="newJob.jobDescription" 
        type="textarea" 
        :rows="3"
        placeholder="请输入职位描述"
        class="form-textarea"
      ></el-input>
    </el-form-item>

    <el-form-item label="应聘要求" class="form-item" align="left">
      <el-input 
        v-model="newJob.requirements" 
        type="textarea" 
        :rows="3"
        placeholder="请输入应聘要求"
        class="form-textarea"
      ></el-input>
    </el-form-item>

    <el-form-item label="福利待遇" class="form-item" align="left">
      <el-input 
        v-model="newJob.benefits" 
        type="textarea" 
        :rows="3"
        placeholder="请输入福利待遇"
        class="form-textarea"
      ></el-input>
    </el-form-item>
  </el-form>
   <template #footer>
    <div class="dialog-footer">
      <el-button 
         @click="addJobDialogVisible = false" 
        size="large"
        class="cancel-btn"
      >
        <el-icon><Close /></el-icon>
        取消
      </el-button>
      <el-button 
        type="primary" 
         @click="submitNewJob" 
        size="large"
        class="confirm-btn"
      >
        <el-icon><Check /></el-icon>
        确认提交
      </el-button>
    </div>
  </template>
</el-dialog>
<!-- 弹窗：已模拟面试岗位 -->
<el-dialog 
  v-model="selectedJobDialogVisible" 
  title="岗位详情"
  width="700px"
  class="custom-dialog"
>
  <template #header>
    <div class="dialog-header">
      <span class="dialog-title">岗位详情</span>
    </div>
  </template>

  <div v-if="selectedJobDetail" class="dialog-content">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="技术领域">{{ selectedJobDetail.jobField }}</el-descriptions-item>
      <el-descriptions-item label="学历要求">{{ selectedJobDetail.education }}</el-descriptions-item>
      <el-descriptions-item label="工作地点">{{ selectedJobDetail.location }}</el-descriptions-item>
      <el-descriptions-item label="计划招聘人数">{{ selectedJobDetail.recruitCount }}</el-descriptions-item>
      <el-descriptions-item label="工作所需经验">{{ formatExperience(selectedJobDetail.minExperience) }}</el-descriptions-item>
      <el-descriptions-item label="公司类型">{{ selectedJobDetail.companySize }}</el-descriptions-item>
      <el-descriptions-item label="岗位名称">{{ selectedJobDetail.jobType }}</el-descriptions-item>
      <el-descriptions-item label="薪资范围">{{ formatSalary(selectedJobDetail.salaryMin, selectedJobDetail.salaryMax) }}</el-descriptions-item>
      <el-descriptions-item label="职位描述">{{ selectedJobDetail.jobDescription }}</el-descriptions-item>
      <el-descriptions-item label="应聘要求">{{ selectedJobDetail.requirements }}</el-descriptions-item>
      <el-descriptions-item label="福利待遇">{{ selectedJobDetail.benefits }}</el-descriptions-item>
      <el-descriptions-item label="模拟面试次数">{{ selectedJobDetail.numberOfInterviews }}</el-descriptions-item>
    </el-descriptions>
  </div>

  <template #footer>
    <div class="dialog-footer">
      <el-button @click="selectedJobDialogVisible = false" class="cancel-btn">关闭</el-button>
      <el-button type="success" @click="startInterview(selectedJobDetail)" class="success-btn">开始模拟面试</el-button>
    </div>
  </template>
</el-dialog>

<!-- 弹窗：搜索的岗位 -->
<el-dialog 
  v-model="jobDialogVisible" 
  title="岗位详情"
  width="700px"
  class="custom-dialog"
>
  <template #header>
    <div class="dialog-header">
      <span class="dialog-title">岗位详情</span>
    </div>
  </template>

  <div v-if="jobDetail" class="dialog-content">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="技术领域">{{ jobDetail.jobField }}</el-descriptions-item>
      <el-descriptions-item label="学历要求">{{ jobDetail.education }}</el-descriptions-item>
      <el-descriptions-item label="工作地点">{{ jobDetail.location }}</el-descriptions-item>
      <el-descriptions-item label="计划招聘人数">{{ jobDetail.recruitCount }}</el-descriptions-item>
      <el-descriptions-item label="工作所需经验">{{ formatExperience(jobDetail.minExperience) }}</el-descriptions-item>
      <el-descriptions-item label="公司类型">{{ jobDetail.companySize }}</el-descriptions-item>
      <el-descriptions-item label="岗位名称">{{ jobDetail.jobType }}</el-descriptions-item>
      <el-descriptions-item label="薪资范围">{{ formatSalary(jobDetail.salaryMin, jobDetail.salaryMax) }}</el-descriptions-item>
      <el-descriptions-item label="职位描述">
      <div style="white-space: pre-line;">{{ jobDetail.jobDescription }}</div></el-descriptions-item>
      <el-descriptions-item label="应聘要求">{{ jobDetail.requirements }}</el-descriptions-item>
      <el-descriptions-item label="福利待遇">{{ jobDetail.benefits }}</el-descriptions-item>
    </el-descriptions>
  </div>

  <template #footer>
    <div class="dialog-footer">
      <el-button @click="jobDialogVisible = false" class="cancel-btn">关闭</el-button>
      <el-button type="success" @click="startInterview(jobDetail)" class="success-btn">开始模拟面试</el-button>
      <el-button type="danger" @click="jobDetail ? handleDelete(jobDetail) : null" class="danger-btn">删除</el-button>
    </div>
  </template>
</el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import axios from 'axios'
import { useMessagesStore } from '@/stores/canMessages'; // 引入 store
import { useDrawerVisibleStore } from '@/stores/canDrawerVisible'
import { useButtonVisibleStore } from '@/stores/canButtonVisible'
import { useInterviewJobStore } from '@/stores/canInterviewJob'
import { useUserInformationStore } from '@/stores/canUserInformation';
import { useDisplayMessage } from '@/stores/canDisplayMessage';
import router from '@/router';
import { ElMessage } from 'element-plus';
import { initDriver } from '@/utils/guide'

// ...其他导入保持不变...

// 添加启动引导的方法
const startGuide = () => {
  const driverObj = initDriver();
  driverObj.drive();
};
const canMessagesStore = useMessagesStore(); // 初始化 store
const canDrawerVisible = useDrawerVisibleStore();
const canButtonVisible = useButtonVisibleStore();
const canInterviewJob = useInterviewJobStore();
const canUserInformation = useUserInformationStore();
const canDisplayMessage = useDisplayMessage();

const API_URL = 'http://localhost:8080/job' // 根据实际接口地址调整

// 存储原始 selectedJobs 数据用于筛选恢复
const originalSelectedJobs = ref<Job[]>([])

// 存储原始 notInterviewedJobs 数据用于筛选恢复
const originalJobList = ref<Job[]>([])

// 定义岗位数据接口
interface Job {
  id?: number
  jobField: string
  requirements?: string
  education?: string
  recruitCount?: string
  location?: string
  jobDescription?: string
  minExperience?: number
  companySize?: string
  jobType?: string
  salaryMin?: number
  salaryMax?: number
  benefits?: string
  numberOfInterviews?: number
  userId? : number
}

// 定义推荐数据接口
interface RecommendedItem {
  id?: number;
  userId? : number
  technicalField: string;
  jobPosition: string;
  suggestion: string;
}

const recommendedData = ref<RecommendedItem[]>([]); // 存储推荐数据

const notInterviewedJobs = ref<Job[]>([])
const interviewedJobs = ref<Job[]>([])
const selectedJobs = ref<Job[]>([])

// 流式相关状态
const loading = ref(false)

// 动画控制：记录每一行当前已经完成到哪个字段
const animatedChars = ref<{ [key: string]: string }>({})

// 动画持续时间和字段间隔
const charDuration = 100 // 每个字动画时长（毫秒）
const fieldDelay = 500    // 字段之间的间隔时间（毫秒）

// 分页相关状态
const pageSizeOptions = ['5', '10', '20']
const recommendedDataPage = ref(1)
const recommendedDataPageSize = ref(5)
const jobListPage = ref(1)
const jobListPageSize = ref(5)
const interviewedJobsPage = ref(1)
const interviewedJobsPageSize = ref(5)
const selectedJobsLength = computed(() => selectedJobs.value.length)

// 当前页显示的数据
const getRecommendedDataForCurrentPage = computed(() => {
  const start = (recommendedDataPage.value - 1) * recommendedDataPageSize.value
  const end = start + recommendedDataPageSize.value
  return recommendedData.value.slice(start, end)
})

const getJobListForCurrentPage = computed(() => {
  const start = (jobListPage.value - 1) * jobListPageSize.value
  const end = start + jobListPageSize.value
  return notInterviewedJobs.value.slice(start, end).map(job => ({
    ...job,
    experience: formatExperience(job.minExperience),
    salary: formatSalary(job.salaryMin, job.salaryMax)
  }))
})

const getInterviewedJobsForCurrentPage = computed(() => {
  const start = (interviewedJobsPage.value - 1) * interviewedJobsPageSize.value
  const end = start + interviewedJobsPageSize.value
  return interviewedJobs.value.slice(start, end).map(job => ({
    ...job,
    experience: formatExperience(job.minExperience),
    salary: formatSalary(job.salaryMin, job.salaryMax)
  }))
})

const showCareerDetail = ref(false)
const selectedCareerDetail = ref<RecommendedItem | null>(null)

// 滚动到底部
const scrollToBottom = () => {
  const container = document.querySelector('.el-table__body-wrapper')
  if (container) {
    container.scrollTop = container.scrollHeight
  }
}

function findCompleteJson(str: string) {
  let index = 0
  let braceCount = 0
  let inString = false
  let escape = false

  for (const char of str) {
    if (char === '"' && !escape) {
      inString = !inString
    } else if (!inString) {
      if (char === '{') {
        braceCount++
      } else if (char === '}') {
        braceCount--
        if (braceCount === 0) {
          return { json: str.slice(0, index + 1), endIndex: index + 1 }
        }
      }
    }

    if (char === '\\' && !escape) {
      escape = true
    } else {
      escape = false
    }

    index++
  }

  return { json: null, endIndex: -1 }
}

const processStreamData = async (reader: ReadableStreamDefaultReader, decoder: TextDecoder, type : string) => {
  let buffer = ''

  while (true) {
    const { done, value } = await reader.read()
    if (done) break

    buffer += decoder.decode(value, { stream: true })

    try {
      const trimmed = buffer.trim()
      if (!trimmed) continue

      const startIndex = trimmed.indexOf('{')
      if (startIndex === -1) {
        console.warn('buffer中未找到JSON起始符{，跳过处理')
        continue
      }

      const possibleJson = trimmed.slice(startIndex)
      const result = findCompleteJson(possibleJson)

      if (result.json) {
        if (type === 'recommendedData') {
          const item = JSON.parse(result.json) as RecommendedItem
          recommendedData.value.push(item) // 添加到推荐数据数组

          // 拼接字符串
          const displayMessage = `基于您的简历信息，为您推荐的岗位是 **${item.jobPosition}**，该岗位属于 **${item.technicalField}** 领域。\n**建议**：\n${item.suggestion}\n`
          canDisplayMessage.setDisplayMessage(displayMessage)

          await nextTick()
          triggerAnimations(recommendedData.value.length-1,false,'recommendedData')
        } else if (type === 'job') {
          const job = JSON.parse(result.json) as Job
          notInterviewedJobs.value.push(job) // 添加岗位到本地数组

          // 拼接字符串
          const displayMessage = `基于您的个人信息以及上传的简历信息，为您推荐了**${job.jobField}** 岗位：\n- **职位描述**：\n${job.jobDescription}\n- **职位要求**：\n${job.requirements}\n- **学历要求**：${job.education}\n- **招聘数量**：${job.recruitCount}\n- **工作地点：${job.location}**\n- **职位类型**：${job.jobType}\n- **职位福利**：\n${job.benefits}\n`
          canDisplayMessage.setDisplayMessage(displayMessage)

          // 等待 DOM 更新后再触发动画
          await nextTick()
          triggerAnimations(notInterviewedJobs.value.length - 1,false,'job')
        } else if (type === 'addRecommendedData') {
          const item = JSON.parse(result.json) as RecommendedItem
          recommendedData.value.push(item) // 添加到推荐数据数组

          // 拼接字符串
          const displayMessage = `基于您添加的**${item.technicalField}**领域的**${item.jobPosition}**岗位，为您生成如下**建议**：\n${item.suggestion}`
          canDisplayMessage.setDisplayMessage(displayMessage)

          await nextTick()
          triggerAnimations(recommendedData.value.length-1,false,'recommendedData')
        } else {
          console.error('Invalid type:', type)
        }

        buffer = possibleJson.slice(result.endIndex + 1)
      }
    } catch (e) {
      console.warn('当前buffer无法解析:', e)
    }
  }

  try {
    const trimmed = buffer.trim()
    if (!trimmed) return

    const result = findCompleteJson(trimmed)
    if (result.json) {
      if (type === 'isRecommendedData') {
        const item = JSON.parse(result.json) as RecommendedItem
        recommendedData.value.push(item)

        await nextTick()
        triggerAnimations(recommendedData.value.length-1,false,'recommendedData')
      } else {
        const job = JSON.parse(result.json) as Job
        notInterviewedJobs.value.push(job)

        // 等待 DOM 更新后再触发动画
        await nextTick()
        triggerAnimations(notInterviewedJobs.value.length - 1,false,'job')
      }
    }
  } catch (e) {
    console.error('最终缓冲区解析失败:', e)
  }
}

// 触发某一行的动画
const triggerAnimations = (rowIndex: number, skipAnimation = false, type : string) => {
  let fields;

  if (type === 'job'){
    const row = notInterviewedJobs.value[rowIndex];
    // 定义字段并进行空值处理
    fields = [
      row.jobField || '',
      row.jobType || '',
      row.education || '',
      row.location || '',
      row.recruitCount?.toString() || '',
      row.companySize || '',
    ]
  } else if (type === 'recommendedData') {
    const row = recommendedData.value[rowIndex];
    fields = [
      row.technicalField || '',
      row.jobPosition || ''
    ]
  } else {
    console.warn(`未知类型 ${type}，无法触发动画`)
    return
  }

  if (!fields) {
    console.error('字段数据未定义')
    return
  }

  if (skipAnimation) {
    // 直接显示全部内容
    fields.forEach((field, fieldIndex) => {
      const chars = [...(field as string)]
      chars.forEach((char, charIndex) => {
        animatedChars.value[`${rowIndex}-${fieldIndex}-${charIndex}`] = char
      })
    })
    scrollToBottom()
    return
  }

  let totalDelay = 0

  fields.forEach((field, fieldIndex) => {
    const chars = [...(field as string)]

    chars.forEach((char, charIndex) => {
      setTimeout(() => {
        animatedChars.value[`${rowIndex}-${fieldIndex}-${charIndex}`] = char
        scrollToBottom()
      }, totalDelay)
      totalDelay += charDuration
    })

    totalDelay += fieldDelay
  })
}

// 生成推荐岗位的功能
const recommendJob = async () => {
  const userInfo = canUserInformation.getUserInfo()
  if (!userInfo || !userInfo.id) {
    console.error('用户信息或用户ID不存在')
    return
  }
  
  // 首先检查是否已经推荐过
  const checkUrl = `http://localhost:8080/job/isRecommended?userId=${userInfo.id}`
  try {
    const response = await axios.get(checkUrl)
    const isRecommended = response.data.data
    
    if (isRecommended) {
      // 如果已经推荐过，直接获取推荐数据
      const url = `http://localhost:8080/job/getRecommendedCareers?userId=${userInfo.id}`
      try {
        const response = await axios.get(url)
        recommendedData.value = response.data.data || []
      } catch (error) {
        console.error('获取推荐岗位失败:', error)
      }
    } else {
      // 如果没有推荐过，请求推荐并处理流式数据
      const url = `http://localhost:8080/job/recommend?userId=${userInfo.id}`
      try {
        canDrawerVisible.drawerVisible = true
        canMessagesStore.clearMessages()
        canMessagesStore.addMessage({
          role: 'user',
          content: '请根据我的简历信息推荐适合的职业方向'
        })
        canMessagesStore.addMessage({
          role: 'assistant',
          content: ''
        })

        loading.value = true
        recommendedData.value = [] // 清空原有推荐数据

        const response = await fetch(url)
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        if (response.body) {
          const reader = response.body.getReader()
          const decoder = new TextDecoder()
          await processStreamData(reader, decoder, 'recommendedData') 
        }
      } catch (error) {
        console.error('获取推荐岗位失败:', error)
      } finally {
        loading.value = false
      }
    }
  } catch (error) {
    console.error('检查推荐状态失败:', error)
  }
}

function showRecommendedDetail(row: RecommendedItem) {
  selectedCareerDetail.value = { ...row }
  showCareerDetail.value = true
}

const fetchJobData = async () => { 
  const userInfo = canUserInformation.getUserInfo()
  const url = `http://localhost:8080/job/searchRecommendedJobs?userId=${userInfo.id}`
  try {
    canMessagesStore.clearMessages();
    canDrawerVisible.drawerVisible = true
    canButtonVisible.setButtonVisible(false)
    canMessagesStore.addMessage({
      role: 'user',
      content: '为我推荐合适的就业岗位'
    })
    canMessagesStore.addMessage({
      role: 'assistant',
      content: ''
    })

    loading.value = true
    notInterviewedJobs.value = [...notInterviewedJobs.value] // 不再清空原有数据
    originalJobList.value = [...originalJobList.value] // 原始副本也不清空

    const response = await fetch(url)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    if (response.body){
      const reader = response.body.getReader()
      const decoder = new TextDecoder()
  
      await processStreamData(reader, decoder,'job')
      originalJobList.value = [...notInterviewedJobs.value]
    }
  } catch (error) {
    console.error('请求推荐岗位失败:', error)
  } finally {
    loading.value = false
  }
}

const changeRecommendJob = async (row: Job) => { 
  removeJob(row,'notInterviewedJobs')
  await nextTick()
  for (let i = 0; i < originalJobList.value.length; i++) {
    triggerAnimations(i, true, 'job')
  }
  const userInfo = canUserInformation.getUserInfo()
  const url = `http://localhost:8080/job/changeRecommendedJob?userId=${userInfo.id}`
  try {
    canMessagesStore.clearMessages();
    canDrawerVisible.drawerVisible = true
    canButtonVisible.setButtonVisible(false)
    canMessagesStore.addMessage({
      role: 'user',
      content: '重新为我推荐合适的1个就业岗位'
    })
    canMessagesStore.addMessage({
      role: 'assistant',
      content: ''
    })

    loading.value = true
    notInterviewedJobs.value = [...notInterviewedJobs.value] // 不再清空原有数据
    originalJobList.value = [...originalJobList.value] // 原始副本也不清空

    const response = await fetch(url)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    if (response.body){
      const reader = response.body.getReader()
      const decoder = new TextDecoder()
  
      await processStreamData(reader, decoder,'job')
      originalJobList.value = [...notInterviewedJobs.value]
    }
  } catch (error) {
    console.error('请求推荐岗位失败:', error)
  } finally {
    loading.value = false
  }
}


const fetchNotInterviewedJobs = async () => { 
  const userInfo = canUserInformation.getUserInfo()
  const url = `${API_URL}/getNotInterviewedJobs?userId=${userInfo.id}`
  try {
    const response = await axios.get(url)
    notInterviewedJobs.value = response.data.data || []
    for (let i = 0; i < notInterviewedJobs.value.length; i++) {
      triggerAnimations(i,true,'job')
    }
  }catch (error) {
    console.error('获取未面试岗位失败:', error)
  }
}

// 函数fetchInterviewedJobs，用于从后端获取数据
const fetchInterviewedJobs = async () => {
  const userInfo = canUserInformation.getUserInfo()
  const url = `${API_URL}/getInterviewedJobs?userId=${userInfo.id}`
  try {
    const response = await axios.get(url)
    interviewedJobs.value = response.data.data || []
  } catch (error) {
    console.error('获取已面试岗位失败:', error)
  }
}

// 从后端和 selectedJobs 中移除岗位，并重新添加到 jobList（无需动画）
const removeJob = async (row: Job, type :string) => {
  try {
    // 请求删除岗位
    await axios.delete(`${API_URL}/removeJob`, {
      data: { id: row.id }
    });
    if (type === 'interviewedJobs'){
      interviewedJobs.value = interviewedJobs.value.filter(job => job.id !== row.id);
    }else if (type === 'notInterviewedJobs'){
      notInterviewedJobs.value = notInterviewedJobs.value.filter(job => job.id !== row.id);
      await nextTick()
      await nextTick()
      for (let i = 0; i < notInterviewedJobs.value.length; i++) {
        triggerAnimations(i,true,'job')
      }
    }
  } catch (error) {
    console.error('删除岗位失败:', error);
  }
};

const deleteRecommended = async (row: RecommendedItem) => { 
  try {
    await axios.delete(`${API_URL}/removeRecommendedCareer`, {
      data: { id: row.id }
    });
    recommendedData.value = recommendedData.value.filter(item => item.id !== row.id);
    showCareerDetail.value = false
  } catch (error) {
    console.error('删除推荐失败:', error);
  }
};

// 组件加载时获取 selectedJobs 数据
onMounted(async () => {
  await fetchSelectedJobsFromServer()
  await recommendJob()
  await fetchNotInterviewedJobs()
  await fetchInterviewedJobs()
})

// 从后端获取 selectedJobs 数据
const fetchSelectedJobsFromServer = async () => {
  const response = await axios.get(`${API_URL}/selected`)
  if (response.data.code === 200) {
    selectedJobs.value = response.data.data || []
    originalSelectedJobs.value = [...response.data.data]
  } else {
    console.error('获取 selectedJobs 失败:', response.data.msg)
  }
}

// 删除岗位：仅从 jobList（和 originalJobList）中移除该岗位
const handleDelete = (row: Job) => {
  // 从 notInterviewedJobs 中移除
  const index = notInterviewedJobs.value.findIndex(job => job.id === row.id)
  if (index > -1) {
    notInterviewedJobs.value.splice(index, 1)
  }

  // 可选：从 originalJobList 中同步移除，保持筛选数据一致
  const originalIndex = originalJobList.value.findIndex(job => job.id === row.id)
  if (originalIndex > -1) {
    originalJobList.value.splice(originalIndex, 1)
  }
}

// 用于存储查看详情的岗位信息
const selectedJobDialogVisible = ref(false)
const jobDialogVisible = ref(false)
const selectedJobDetail = ref<Job | null>(null)
const jobDetail = ref<Job | null>(null)

// 显示第一个表格的详情
const showSelectedJobDetail = (job: Job) => {
  selectedJobDetail.value = { ...job }
  selectedJobDialogVisible.value = true
}

// 显示第二个表格的详情
const showJobDetail = (job: Job) => {
  jobDetail.value = { ...job }
  jobDialogVisible.value = true
}

// 开始模拟面试
const startInterview = async (job: Job | null) => {
  if (!job) return
  // console.log('开始模拟面试:', job)
  canInterviewJob.setInterviewJob(job)
  selectedJobDialogVisible.value = false
  const url = `&{API_URL}/updateJob?id=${job.id}`
  try {
    const response = await axios.get(url)
    fetchNotInterviewedJobs()
    fetchInterviewedJobs()
    router.push({name: 'XrtcPlayer'})
  }catch (error) {
    console.error('更新岗位失败:', error)
  }
}

// 格式化薪资为 k 单位
const formatSalary = (min: number | undefined, max: number | undefined): string => {
  if (min === undefined || max === undefined) return ''
  const toK = (val: number) => (val / 1000).toFixed(val % 1000 !== 0 ? 1 : 0)
  return `${toK(min)}k-${toK(max)}k`
}

// 格式化工作经验
const formatExperience = (years: number | undefined): string => {
  if (years === undefined) return ''
  if (years === 0) return '不限经验'
  return `${years}年以上`
}

const handleChange = async (row: RecommendedItem) => { 
  await deleteRecommended(row)
  const userInfo = canUserInformation.getUserInfo()
  const url = `http://localhost:8080/job/changeRecommendedCareer?userId=${userInfo.id}`
    try {
      canDrawerVisible.drawerVisible = true
      canMessagesStore.clearMessages()
      canMessagesStore.addMessage({
        role: 'user',
        content: '请根据我的简历信息推荐适合的职业方向'
      })
      canMessagesStore.addMessage({
        role: 'assistant',
        content: ''
      })

      loading.value = true

      const response = await fetch(url)
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }

      if (response.body) {
        const reader = response.body.getReader()
        const decoder = new TextDecoder()
        await processStreamData(reader, decoder, 'recommendedData') 
      }
    } catch (error) {
      console.error('获取推荐岗位失败:', error)
    } finally {
      loading.value = false
    }
}

// 新增响应式数据用于新增岗位建议
const addRecommendationDialogVisible = ref(false)
const newRecommendation = ref<RecommendedItem>({
  technicalField: '',
  jobPosition: '',
  suggestion: ''
})

// 方法：显示新增岗位建议对话框
const showAddRecommendationDialog = () => {
  addRecommendationDialogVisible.value = true
}

const rules = {
  technicalField: [
    { required: true, message: '请输入技术领域', trigger: 'blur' }
  ],
  jobPosition: [
    { required: true, message: '请输入推荐岗位', trigger: 'blur' }
  ]
};

// 方法：提交新增岗位建议
const submitNewRecommendation = async () => {
  try {
    // 表单验证
    if (!newRecommendation.value.technicalField || !newRecommendation.value.jobPosition) {
      ElMessage.error('技术领域和推荐岗位为必填项');
      return;
    }

    // 构造要发送的岗位数据
    const jobData = {
      ...newRecommendation.value,
      userId: canUserInformation.getUserInfo().id ?? undefined,
    };

    canDrawerVisible.drawerVisible = true;
    canButtonVisible.setButtonVisible(false);
    canMessagesStore.addMessage({
      role: 'user',
      content: '根据我添加的职业方向、个人信息以及简历信息，为我生成该职业方向的建议。'
    });
    canMessagesStore.addMessage({
      role: 'assistant',
      content: ''
    });

    const url = `${API_URL}/addRecommendedCareer`;

    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(jobData)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    if (response.body) {
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      await processStreamData(reader, decoder, 'addRecommendedData');
    }
  } catch (error) {
    console.error('岗位信息提交失败:', error);
    ElMessage.error('提交失败，请检查网络连接或稍后重试');
  } finally {
    // 清空表单（无论成功与否都需要执行）
    newRecommendation.value = { technicalField: '', jobPosition: '', suggestion: '' };
    addRecommendationDialogVisible.value = false;
  }
};

// 新增响应式数据用于新增岗位
const addJobDialogVisible = ref(false)
const newJob = ref<Job>({
  jobField: '',
  jobType: '',
  requirements: '',
  education: '',
  recruitCount: '',
  location: '',
  jobDescription: '',
  minExperience: undefined,
  companySize: '',
  salaryMin: undefined,
  salaryMax: undefined,
  benefits: ''
})

// 方法：显示新增岗位对话框
const showAddJobDialog = () => {
  addJobDialogVisible.value = true
}

// 方法：提交新增岗位
const submitNewJob = async () => {
  // 构造要发送的岗位数据
  const jobData = {
    ...newJob.value,
    numberOfInterviews: 0,
    userId: canUserInformation.getUserInfo().id ?? undefined
  }

  canDrawerVisible.drawerVisible = true
  canButtonVisible.setButtonVisible(false)
  canMessagesStore.addMessage({
    role: 'user',
    content: '根据我新增的岗位，生成建议'
  })
  canMessagesStore.addMessage({
    role: 'assistant',
    content: ''
  })

  try {
    const url = `${API_URL}/addJob`

    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(jobData)
    })

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    if (response.body) {
      const reader = response.body.getReader()
      const decoder = new TextDecoder()
      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        const chunk = decoder.decode(value, { stream: true })
        canDisplayMessage.setDisplayMessage(chunk);
      }
    }
  } catch (error) {
    console.error('岗位信息提交失败:', error)
  }

  // 清空表单
  newJob.value = {
    jobField: '',
    jobType: '',
    requirements: '',
    education: '',
    recruitCount: '',
    location: '',
    jobDescription: '',
    minExperience: undefined,
    companySize: '',
    salaryMin: undefined,
    salaryMax: undefined,
    benefits: ''
  }
  addJobDialogVisible.value = false
}
</script>
<style scoped>
/* 部分标题 */
.section {
  margin-bottom: 40px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.section:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.section-title {
  color: #2c3e50;
  border-left: 4px solid #3498db;
  padding-left: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
}
.pop-char {
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  animation: pop-in 0.2s ease forwards;
}

@keyframes pop-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* h2 {
  text-align: left;
  color: rgb(0, 140, 255);
} */

.filter-container {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
  padding: 10px;
  margin-bottom: 20px;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

.recommendation-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.dialog-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.form-content {
  padding: 30px 40px;
  background-color: #f8fafc;
}

.form-item {
  margin-bottom: 28px;
}

.form-item .el-form-item__label {
  font-weight: 600;
  color: #4a5568;
  padding-bottom: 10px;
  font-size: 15px;
  letter-spacing: 0.3px;
}

.custom-input {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-input .el-input__inner {
  height: 48px;
  line-height: 48px;
  padding-left: 40px;
  background-color: #fff;
  color: #2d3748;
  font-size: 15px;
  transition: all 0.3s ease;
  /* border: 1px solid #e2e8f0; */
  box-shadow: none; /* 确保无阴影 */
}

.custom-input .el-input__inner:focus {
  border-color: #4299e1;
  box-shadow: none; /* 聚焦状态无阴影 */
}

.custom-input .el-input__prefix {
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: #718096;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px 30px;
  background-color: #f8fafc;
  border-top: 1px solid #edf2f7;
}

.cancel-btn {
  width: 120px;
  border-radius: 8px;
  background-color: #fff;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  font-weight: 500;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #f7fafc;
  color: #2d3748;
  border-color: #cbd5e0;
}

.cancel-btn .el-icon {
  margin-right: 6px;
  font-size: 16px;
}

.confirm-btn {
  width: 140px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1193cb 0%, #25adfc 100%);
  border: none;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 117, 252, 0.3);
}

.confirm-btn .el-icon {
  margin-right: 6px;
  font-size: 16px;
}

.custom-dialog {
  border-radius: 12px;
}

.dialog-header {
  padding: 24px 24px 16px;
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(to right, #f8fafc, #ffffff);
  border-radius: 12px 12px 0 0;
}

.dialog-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
}

.dialog-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(to bottom, #409eff, #66b1ff);
  margin-right: 12px;
  border-radius: 2px;
}

.dialog-form {
  padding: 16px 24px;
}

.dialog-content {
  padding: 0 24px;
}

.form-input :deep(.el-input__inner),
.form-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none; /* 移除内阴影 */
}

.form-input :deep(.el-input__inner):focus,
.form-textarea :deep(.el-textarea__inner):focus {
  border-color: #409eff;
  box-shadow: none; /* 聚焦状态无阴影 */
}

:deep(.el-descriptions) {
  margin-top: 10px;
}

:deep(.el-descriptions__header) {
  margin-bottom: 10px;
}

:deep(.el-descriptions__title) {
  font-size: 16px;
  font-weight: 600;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
  width: 120px;
}

.dialog-footer {
  padding: 20px 32px;
  text-align: right;
  border-top: 1px solid #f0f0f0;
  background-color: #f9fafc;
  border-radius: 0 0 12px 12px;
}

.cancel-btn {
  border-radius: 8px;
  padding: 10px 24px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
  color: #606266;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  transform: translateY(-1px);
}

.submit-btn {
  border-radius: 8px;
  padding: 10px 24px;
  background: linear-gradient(to right, #409eff, #66b1ff);
  border: none;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.submit-btn:hover {
  background: linear-gradient(to right, #66b1ff, #409eff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.success-btn {
  border-radius: 8px;
  padding: 10px 24px;
  background: linear-gradient(to right, #67c23a, #85ce61);
  border: none;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(103, 194, 58, 0.3);
}

.success-btn:hover {
  background: linear-gradient(to right, #85ce61, #67c23a);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
}

.danger-btn {
  border-radius: 8px;
  padding: 10px 24px;
  background: linear-gradient(to right, #f56c6c, #f78989);
  border: none;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(245, 108, 108, 0.3);
}

.danger-btn:hover {
  background: linear-gradient(to right, #f78989, #f56c6c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
}

.form-item {
  margin-bottom: 20px;
}

.form-item .el-form-item__label {
  font-weight: 600;
  color: #606266;
  padding-bottom: 8px;
  display: block;
  text-align: left;
}

.form-input :deep(.el-input__inner) {
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 14px;
  transition: all 0.3s;
  background-color: #f8fafc;
  border: 1px solid #dcdfe6;
  box-shadow: none; /* 新增岗位表单输入框无阴影 */
}

.form-input :deep(.el-input__inner):focus {
  border-color: #409eff;
  box-shadow: none; /* 聚焦状态无阴影 */
}

.form-textarea :deep(.el-textarea__inner) {
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 14px;
  transition: all 0.3s;
  background-color: #f8fafc;
  border: none;
  box-shadow: none; /* 文本域无阴影 */
}

.salary-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.range-separator {
  color: #909399;
  font-size: 14px;
}

.career-detail-dialog .career-detail-content {
  text-align: left;
  padding: 0 24px;
}

.detail-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.section-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.change-btn,
.detail-btn {
  width: 100%;
}

@media (max-width: 768px) {
  .salary-range {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .range-separator {
    padding: 5px 0;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
/* 去除新增岗位弹窗中输入框的外层边框 */
.custom-dialog .el-input__wrapper {
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

.custom-dialog .el-input__inner {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px 15px;
}

.custom-dialog .el-input__inner:focus {
  border-color: #409eff;
}
/* 优化表单整体样式 */
.dialog-form {
  padding: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
  /* display: block; */
}
/* 美化输入框 */
.form-input :deep(.el-input__inner) {
  transition: all 0.3s ease;
  background-color: #f8fafc;
}

.form-input :deep(.el-input__inner:hover) {
  border-color: #c0c4cc;
}

.form-input :deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}


</style>